<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-08 19:11:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-09 17:59:00
-->

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>千锋选课系统</title>
		<style type="text/css">
			select {
				width: 200px;
				height:350px;
			}
			input {
				position: absolute;
				width: 100px;
				margin-left: -150px;
			}
		</style>
		
		<script type="text/javascript">
			var leftSelected;
			var rightSelected;
			window.onload = function(){
				leftSelected = document.getElementById('leftSelect');
				rightSelected = document.getElementById('rightSelect');


			}
			//把左边选中的数据移到右边
			function right(){
				// console.log(leftSelected.options);
				// console.log(leftSelected);
				var options = leftSelected.options;
				for(var i=0;i<options.length;i++){
					if(options[i].selected == true){
						rightSelected.appendChild(options[i--]);
					}
				}
			}

			//把右边选中的数据移动到左边 
			function left(){
				var options = rightSelected.options;
				console.log(options)
				for(var i=0;i<options.length;i++){
					if(options[i].selected == true){
						leftSelected.appendChild(options[i--]);
					}
				}
			}
			

			
			function up(){
				var options = leftSelected.options; 
				// 获取所有的 下拉列表所有的  options
				for(var i=0;i<options.length;i++){
					if(options[i].selected == true){
						if(i == 0){
							return
						}
						leftSelected.insertBefore(options[i],options[i].previousElementSibling);
					}
				}


				var options = rightSelected.options; 
				// 获取所有的 下拉列表所有的  options
				for(var i=0;i<options.length;i++){
					if(options[i].selected == true){
						if(i == 0){
							return
						}
						leftSelected.insertBefore(options[i],options[i].previousElementSibling);
					}
				}
			}

			function down1(){
				var options = leftSelected.options; 
			
				// 获取所有的 下拉列表所有的  options
				for(var i=options.length-1;i>=0;i--){
					// console.log(options[i]);
					
					if(options[i].selected == true){
						if(i==options.length-1){
							return 
						}
						leftSelected.insertBefore(options[i].nextElementSibling,options[i]);
					}
				}


				var options = rightSelected.options; 
			
				// 获取所有的 下拉列表所有的  options
				for(var i=options.length-1;i>=0;i--){
					// console.log(options[i]);
					
					if(options[i].selected == true){
						if(i==options.length-1){
							return 
						}
						leftSelected.insertBefore(options[i].nextElementSibling,options[i]);
					}
				}
			}

			// function changes(x,y){
			// 	var temp = x;
			// 	x = y;
			// 	y = temp
			// }
				// temp = e2;
				// e2 = e1;
				// e1 = temp
			function swap(e1,e2){
				var temp = e1.cloneNode(true); // e1 
				//为什么不把temp = e1  e1直接给temp
				// 父节点.replaceChild(把谁换上,把谁换下);
				// 因为节点替换必须是节点和节点 不允许空和节点交换
				// console.log(temp);
				e2.parentNode.replaceChild(temp,e2);
				e1.parentNode.replaceChild(e2,e1);
				temp.parentNode.replaceChild(e1,temp);
		
			}


			function down(){
				// 选中的和下一个完成交换 
				var options = leftSelected.options; 
				for(var i=options.length-1;i>=0;i--){
					if(options[i].selected == true){
						if( i == options.length-1){
							return
						}
						swap(options[i],options[i+1])
					}
				}

				// i从0开始 一直到最后  
				// 也就是每个元素跟弟弟交换
				// 当选中下标0这个元素 
				// 后边的元素都是它的弟弟 
				// 也就是会全部交换完成 下标0会到最后边


				var options = rightSelected.options; 
				for(var j=0;j<options.length;j++){
					if(options[i].selected == true){
						if( j == options.length-1){
							return
						}
						swap(options[j],options[j+1])
					}
				}
				
			}


			function cancelLeft(){
				var options = leftSelected.options; 
				// 遍历左边谁被选中  
				// 或者全部取消选中  
				for(var i=0;i<options.length;i++){
					options[i].selected = false
				}	

			}

			function cancelRight(){
				var options = rightSelected.options; 
				for(var i=0;i<options.length;i++){
					options[i].selected = false
				}	
			}
			
		</script>
	</head>
	<body>
		<center>
			<fieldset style="width:800px;">
				<legend>请选择课程</legend>
				<br>
				<select id="leftSelect" multiple="multiple" size="23" style="margin-right:200px;" ondblclick="right();">
					<option>职场新动力英语1</option>
					<option>职场新动力英语2</option>
					<option>职场新动力英语3</option>
					<option>职场新动力数学1</option>
					<option>职场新动力数学2</option>
					<option>职场新动力数学3</option>
					<option>计算机基础</option>
					<option>网页设计</option>
					<option>C语言程序设计</option>
					<option>CoreJava</option>
					<option>JavaWeb编程</option>
					<option>RIA应用</option>
					<option>Java高级/CMS案例</option>
					<option>数据结构与算法</option>
					<option>Struts/hibernate/Mybatis</option>
					<option>springMVC/SSH/WebService</option>
					<option>项目实训1</option>
					<option>项目实训2</option>
					<option>项目实训3</option
				</select>
				<input type="button" value="→ 添加 →" style="margin-top:50px;" onclick="right();">
				<input type="button" value="← 删除 ←" style="margin-top:100px;" onclick="left();">
				<input type="button" value="↑ 上移 ↑" style="margin-top:150px;" onclick="up();">
				<input type="button" value="↓ 下移 ↓" style="margin-top:200px;" onclick="down();">
				<input type="button" value="取消左选" style="margin-top:250px;" onclick="cancelLeft()	;">
				<input type="button" value="取消右选" style="margin-top:300px;" onclick="cancelRight();">
		
				<select id="rightSelect" multiple="multiple" size="23"  ondblclick="left();" onclick="cancelLeft();">
				</select>
				<br>
				<br>
			</fieldset>
		</center>
	</body>
</html>
